<script>
import { getFollowRecordDetail } from './api'
import { finish } from '@/views/myTask/api.js'
import Record from './components/Record.vue'
// import followup from './followup'
export default {
  name: '',
  components: { Record },
  data() {
    return {
      data: '',
      status: null,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getFollowRecordDetail()
  },
  methods: {
    getFollowRecordDetail() {
      const toast = this.$toast.loading()
      getFollowRecordDetail(this.$route.query.recordId)
        .then(({ data }) => {
          this.data = data || {}
          toast.clear()
        })
        .catch((err) => {
          toast.clear()
        })
    },
    // 完成事项
    achieve() {
      this.$dialog
        .confirm({
          title: '完成事项',
          message: '是否确认已完成此次协定日期的事项跟进?',
        })
        .then(() => {
          this.$toast.loading()
          return finish(this.$route.query.tasksId)
        })
        .then((res) => {
          this.$toast.success('操作成功')
          this.$router.replace(this.$route.fullPath.replace('status=0', 'status=1'))
          // this.updateInfo()
        })
        .finally(() => {
          this.$toast.clear()
        })
    },
  },
}
</script>

<template>
  <div>
    <div class="custom">
      <div class="custom-name">
        <span>{{ data.leadsName }}</span>
      </div>
      <div v-if="data.followerName" class="custom-info">
        <span class="key">跟进人</span>
        <span class="value">{{ data.followerName }}</span>
      </div>
    </div>

    <Record class="mt10" v-if="data" isData :data="data" ref="record" />

    <div class="footer">
      <van-button v-if="$route.query.status == 0" type="primary" round block @click="achieve">
        已完成此事项跟进
      </van-button>
      <van-button v-else disabled round block>
        此事项已完成跟进
      </van-button>
    </div>

    <!-- 添加跟进 弹窗 -->
    <!-- <followup
      v-model="showFollowup"
      type="replay"
      title="回复跟进"
      :leadId="leadsId"
      @success="$refs.record.getList(1)"
    /> -->
  </div>
</template>

<style lang="less" scoped>
.page {
  padding-bottom: 64px;
}
.custom {
  background: #fff;
  padding: 15px;
  .custom-info {
    margin-top: 8px;
    font-size: 12px;
    .key {
      color: #b5b8c0;
    }
    .value {
      margin-left: 10px;
      color: #5f6063;
    }
  }
}
.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 10px;
  z-index: 9;
  background: #fff;
}
::v-deep .timeline-box {
  padding-left: 0;
}
</style>
